import type { App } from 'vue'
import { createI18n } from 'vue-i18n'
import { useLocaleStoreWithOut } from '@/stores/modules/locale'
import type { I18n, I18nOptions } from 'vue-i18n'
import { setHtmlPageLang } from './helper'

export let i18n: ReturnType<typeof createI18n>

const createI18nOptions = async (): Promise<I18nOptions> => {
  const localeStore = useLocaleStoreWithOut()
  const currentLocale = localeStore.getCurrentLocale
  const localeMap = localeStore.getLocaleMap
  const localeModule = await import(`@/locales/${currentLocale.lang}.ts`)
  const localeMessage = localeModule.default ?? {}

  // 需要一并调整<html lang="xxx">的lang属性，以便与屏幕阅读器(无障碍访问等)、或其他浏览器工具等正确兼容
  setHtmlPageLang(currentLocale.lang)

  // 未设置语言时，将默认的语言设置回去
  localeStore.setCurrentLocale({ lang: currentLocale.lang })

  const missingWarn = process.env.NODE_ENV === 'development'
  const fallbackWarn = process.env.NODE_ENV === 'development'

  return {
    legacy: false,
    locale: currentLocale.lang,
    fallbackLocale: ['en', 'zh-CN'], // 下面只加载了当前语言包，所以这里配置fallback没有什么意义
    messages: {
      [currentLocale.lang]: localeMessage
    },
    availableLocales: localeMap.map((v) => v.lang),
    sync: true, // 子组件与根实例的语言设置同步
    silentTranslationWarn: !missingWarn, // 未找到key在当前语言的翻译值时，是否打印告警信息
    silentFallbackWarn: !fallbackWarn, // 若当前语言未找到key对应翻译值，则降级到其他语言，此时是否打印警告信息
    missingWarn: missingWarn,
    fallbackWarn: fallbackWarn
  }
}

export const setupI18n = async (app: App<Element>) => {
  const options = await createI18nOptions()
  i18n = createI18n(options) as I18n
  app.use(i18n)
}
